<template>
  <a-popover
    trigger="contextmenu"
    v-model:open="open"
    :overlayClassName="`${prefixCls}-popover`"
    :getPopupContainer="getPopupContainer"
    :placement="position"
  >
    <template #title>
      <span>{{ title }}</span>
      <span style="float: right" title="关闭">
        <Icon icon="i-ant-design:close-outlined" @click="open = false" />
      </span>
    </template>
    <template #content>
      <a-textarea ref="textareaRef" :value="innerValue" :disabled="disabled" :style="textareaStyle" v-bind="attrs" @input="onInputChange" />
    </template>
    <a-input :class="`${prefixCls}-input`" :value="innerValue" :disabled="disabled" v-bind="attrs" @change="onInputChange">
      <template #suffix>
        <Icon icon="i-ant-design:fullscreen-outlined" @click.stop="onShowPopup" />
      </template>
    </a-input>
  </a-popover>
</template>

<script lang="ts" setup>
  import { computed, nextTick, ref, watch } from "vue"
  import Icon from "/@/components/Icon/src/Icon.vue"
  import { useAttrs } from "/@/hooks/core/useAttrs"
  import { propTypes } from "/@/utils/propTypes"
  import { useDesign } from "/@/hooks/web/useDesign"

  const { prefixCls } = useDesign("j-input-popup")
  const props = defineProps({
    // v-model:value
    value: propTypes.string.def(""),
    title: propTypes.string.def(""),
    // 弹出框显示位置
    position: propTypes.string.def("right"),
    width: propTypes.number.def(300),
    height: propTypes.number.def(150),
    disabled: propTypes.bool.def(false),
    // 弹出框挂载的元素ID
    popContainer: propTypes.oneOfType([propTypes.string, propTypes.func]).def(""),
  })
  const attrs = useAttrs()
  const emit = defineEmits(["change", "update:value"])

  const open = ref<boolean>(false)
  const innerValue = ref<string>("")
  // textarea ref对象
  const textareaRef = ref()
  // textarea 样式
  const textareaStyle = computed(() => ({
    height: `${props.height}px`,
    width: `${props.width}px`,
  }))

  watch(
    () => props.value,
    (value) => {
      if (value && value.length > 0) {
        innerValue.value = value
      }
    },
    { immediate: true }
  )

  function onInputChange(event) {
    innerValue.value = event.target.value
    emitValue(innerValue.value)
  }

  async function onShowPopup() {
    open.value = true
    await nextTick()
    textareaRef.value?.focus()
  }

  // 获取弹出框挂载的元素
  function getPopupContainer(node) {
    if (!props.popContainer) {
      return node.parentNode
    } else if (typeof props.popContainer === "function") {
      return props.popContainer(node)
    } else {
      return document.getElementById(props.popContainer)
    }
  }

  function emitValue(value) {
    emit("change", value)
    emit("update:value", value)
  }
</script>

<style lang="less">
  //noinspection LessUnresolvedVariable
  @prefix-cls: ~"@{namespace}-j-input-popup";

  .@{prefix-cls} {
    &-popover {
    }

    &-input {
      .app-iconify {
        cursor: pointer;
        color: #666666;
        transition: color 0.3s;

        &:hover {
          color: black;
        }
      }
    }
  }
</style>
